<!--
*@Author: QWP
*@Description: 应急群管理，聊天页面
*@Date: 2024-07-11 10:59:02
-->
<template>
  <a-layout class="f-h-100"
    style="background: #F0F2F5;">
    <SiderImage v-if="showImg"/>
    <a-layout class="f-h-100">
      <UserList :isDialog="isDialog" 
        :isOpen="isOpen"
        :dialogOpen="$attrs['open']"
        :currentUser="currentUser"
        :keyUnNumber="$attrs['keyUnNumber']"
        @click="(data) => {
          currentGroup = data; 
          showGroupUser = false
        }"/>
      <a-layout class="f-h-100">
        <Header :data="currentGroup"
          :isDialog="isDialog"
          :showMore="currentGroup['types'] == '1'"
          @close="emits('close')"
          @more="showGroupUser = !showGroupUser"/>
        <a-layout>
          <a-layout-content class="s-bg-white">
            <ChatContent :data="currentGroup" 
              :dailogOpen="$attrs['open']"
              v-if="isCurrentGroup"/>
          </a-layout-content>

          <SiderGroupUser :data="currentGroup" v-show="showGroupUser"/>
        </a-layout>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import SiderImage from './SiderImage.vue';
import UserList from './UserList.vue';
import Header from './Header.vue'
import SiderGroupUser from './SliderGroupUser.vue'
import ChatContent from './ChatContent.vue'

interface Props {
  showImg?: boolean,
  isDialog?: boolean,
  isOpen?: boolean,
  currentUser?: object, // 选择人员打开聊天窗
}
withDefaults(defineProps<Props>(), {
  showImg: false,
  isDialog: false,
  isOpen: false,
})

const route = useRoute();
const emits = defineEmits(['close'])

// 当前选中的聊天群
const currentGroup = ref({})
const isCurrentGroup = computed(() => {
  return Object.keys(currentGroup.value || {}).length != 0
})

// 查看群成员
const showGroupUser = ref<boolean>(false)

</script>

<style lang='scss' scoped>
</style>